<template>
  <div class="page-container">
    <!--工具栏-->
    <div class="toolbar">
      <el-form :inline="true" :model="filters" :size="size" ref="filters" label-width="100px">
        <el-row class="search-input">
          <el-form-item label="商家编码：" prop="merchantCode">
            <el-input v-model="filters.merchantCode" placeholder="商家编码"></el-input>
          </el-form-item>
          <el-form-item label="支付渠道：" prop="payChannel">
            <el-input v-model="filters.payChannel" placeholder="支付渠道"></el-input>
          </el-form-item>
          <el-form-item label="网关名称：" prop="gatewayName">
            <el-input v-model="filters.gatewayName" placeholder="网关名称"></el-input>
          </el-form-item>
          <el-form-item label="销售渠道：" prop="saleChannelCode">
            <el-select v-model="filters.saleChannelCode" placeholder="销售渠道">
              <el-option label="请选择" value=""></el-option>
              <el-option
                v-for="item in saleChannelOption"
                :key="item.id"
                :label="item.channelName"
                :value="item.id"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-row>
        <el-row class="search-button">
          <el-form-item>
            <kt-button
              icon="fa fa-search"
              :label="$t('action.search')"
              type="primary"
              @click="findPage(null)"
            />
            <kt-button
              icon="fa fa-plus"
              :label="$t('action.add')"
              type="primary"
              @click="handleAdd"
            />
          </el-form-item>
          <el-form-item>
            <kt-button
              icon="fa fa-refresh"
              :label="$t('action.reset')"
              type="primary"
              @click="resetForm('filters')"
            />
          </el-form-item>
        </el-row>
        <el-row class="t_r button">
          <el-form-item>
            <el-button-group>
              <el-tooltip content="刷新" placement="top">
                <el-button icon="fa fa-refresh" @click="findPage(null)"></el-button>
              </el-tooltip>
              <el-tooltip content="列显示" placement="top">
                <el-button icon="fa fa-filter" @click="displayFilterColumnsDialog"></el-button>
              </el-tooltip>
              <el-tooltip content="导出" placement="top">
                <el-button icon="fa fa-file-excel-o" @click="downloadExcel"></el-button>
              </el-tooltip>
            </el-button-group>
          </el-form-item>
        </el-row>
      </el-form>
    </div>
    <div class="toolbar" style="float:right;padding-right:15px;">
      <!--表格显示列界面-->
      <table-column-filter-dialog
        ref="tableColumnFilterDialog"
        :columns="columns"
        @handleFilterColumns="handleFilterColumns"
      ></table-column-filter-dialog>
    </div>
    <!--表格内容栏-->
    <cy-table
      :width="1000"
      :height="250"
      :data="pageResult"
      :operationWidth="280"
      :customLabel="'配置网关'"
      :columns="filterColumns"
      :showEditOperation="true"
      :showBatchDelete="true"
      :showDeleteOperation="true"
      :showCustomOperation="true"
      @selectionChange="selectionChange"
      @findPage="findPage"
      @handleEdit="handleEdit"
      @handleDelete="handleDelete"
      @handleCustom="handleCustom"
      ref="CyTable"
    ></cy-table>
    <!--新增编辑界面-->
    <el-dialog
      :title="operation?'新增':'编辑'"
      width="38%"
      :visible.sync="dialogVisible"
      :close-on-click-modal="false"
      @closed="handleClose(1)"
    >
      <el-form
        :model="dataForm"
        label-width="100px"
        :rules="dataFormRules"
        ref="dataForm"
        :size="size"
        label-position="right"
      >
        <el-row class="searchDialog-input">
          <el-form-item label="ID：" prop="id" v-if="false">
            <el-input
              v-model="dataForm.id"
              :disabled="true"
              auto-complete="off"
              placeholder="请输入ID"
            ></el-input>
          </el-form-item>
          <el-form-item label="支付方式：" prop="methodName">
            <el-input
              v-model="dataForm.methodName"
              :disabled="true"
              :value="dataForm.methodName"
              auto-complete="off"
              placeholder="请输入支付方式"
            ></el-input>
          </el-form-item>
          <el-form-item label="支付渠道：" prop="channelCode">
            <el-select
              v-model="dataForm.channelCode"
              placeholder="支付渠道"
              style="width:100%"
              @change="changePay"
            >
              <el-option label="请选择：" value=""></el-option>
              <el-option
                v-for="item in payChannelOption"
                :key="item.id"
                :label="item.val"
                :value="item.id"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="网关名称：" prop="gatewayCode">
            <el-select
              v-model="dataForm.gatewayCode"
              placeholder="网关名称"
              style="width:100%"
              @change="changeGateway"
            >
              <el-option label="请选择" value=""></el-option>
              <el-option
                v-for="item in gatewayOption"
                :key="item.id"
                :label="item.val"
                :value="item.id"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="销售渠道：" prop="saleChannelCode">
            <el-select
              v-model="dataForm.saleChannelCode"
              placeholder="销售渠道"
              style="width:100%"
              @change="changeChannel"
            >
              <el-option label="请选择" value=""></el-option>
              <el-option
                v-for="item in saleChannelOption"
                :key="item.id"
                :label="item.channelName"
                :value="item.id"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="门店编码：" prop="storeCode">
            <el-input v-model="dataForm.storeCode" placeholder="非必填" auto-complete="off"></el-input>
          </el-form-item>
          <el-form-item label="商家编码：" prop="merchantCode">
            <el-input v-model="dataForm.merchantCode" placeholder="非必填" auto-complete="off"></el-input>
          </el-form-item>
          <el-form-item label="业务类型：" prop="businessType">
            <el-select v-model="dataForm.businessType" placeholder="业务类型" style="width:100%">
              <el-option label="请选择" value=""></el-option>
              <el-option
                v-for="item in businessTypeOption"
                :key="item.key"
                :label="item.value"
                :value="item.key"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="终端类型：" prop="terminalType">
            <el-input
              v-model="dataForm.terminalType"
              :value="dataForm.terminalType"
              :disabled="true"
              auto-complete="off"
            ></el-input>
          </el-form-item>
          <el-form-item label="图标地址：" prop="iconUrl">
            <el-input
              v-model="dataForm.iconUrl"
              :value="dataForm.iconUrl"
              :disabled="true"
              auto-complete="off"
            ></el-input>
          </el-form-item>
          <el-form-item label="支付地址：" prop="payUrl">
            <el-input v-model="dataForm.payUrl" auto-complete="off" placeholder="请输入支付地址"></el-input>
          </el-form-item>
          <el-form-item label="跳转地址：" prop="returnUrl">
            <el-input v-model="dataForm.returnUrl" auto-complete="off" placeholder="请输入跳转地址"></el-input>
          </el-form-item>
          <el-form-item label="回调地址：" prop="notifyUrl">
            <el-input v-model="dataForm.notifyUrl" auto-complete="off" placeholder="请输入回调地址"></el-input>
          </el-form-item>
          <el-form-item label="状态：" prop="status">
            <el-radio-group v-model="dataForm.status" >
              <el-radio :label="1">启用</el-radio>
              <el-radio :label="2">禁用</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="备注：" prop="remark">
            <el-input v-model="dataForm.remark" auto-complete="off" placeholder="请输入备注"></el-input>
          </el-form-item>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer" style="text-align:center">
        <el-button :size="size" @click.native="dialogVisible = false">{{$t('action.cancel')}}</el-button>
        <el-button
          :size="size"
          type="primary"
          @click.native="submitForm"
          :loading="editLoading"
        >{{$t('action.submit')}}</el-button>
      </div>
    </el-dialog>
    <el-dialog title="配置网关页面" :visible.sync="checkpage" width="40%" @closed="handleCloses">
      <el-form
        :model="statusForm"
        ref="statusForm"
        :rules="statusRuleForm"
        :size="size"
        label-width="270px"
        label-position="right"
      >
        <!-- 微信 -->
        <el-row v-if="wechant" class="searchDialog-input">
          <el-form-item label="gatewayId：" prop="gatewayId" v-if="false">
            <el-input v-model="statusForm.gatewayId" :disabled="true" auto-complete="off" placeholder="请输入"></el-input>
          </el-form-item>
          <el-form-item label="privateCertificateKey(私钥证书Key)：" prop="privateCertificateKey">
            <el-input v-model="statusForm.privateCertificateKey" auto-complete="off" placeholder="请输入"></el-input>
          </el-form-item>
          <el-form-item label="privateCertificate(私钥证书)：" prop="privateCertificate">
            <el-input v-model="statusForm.privateCertificate" auto-complete="off" placeholder="请输入"></el-input>
          </el-form-item>
          <el-form-item label="merchantId(商户号)：" prop="merchantId">
            <el-input v-model="statusForm.merchantId" auto-complete="off" placeholder="请输入"></el-input>
          </el-form-item>
          <el-form-item label="mappSecret(应用secret)：" prop="mappSecret">
            <el-input v-model="statusForm.mappSecret" auto-complete="off" placeholder="请输入"></el-input>
          </el-form-item>
          <el-form-item label="appKey(应用Key)：" prop="appKey">
            <el-input v-model="statusForm.appKey" auto-complete="off" placeholder="请输入"></el-input>
          </el-form-item>
          <el-form-item label="appId(应用ID)：" prop="appId">
            <el-input v-model="statusForm.appId" auto-complete="off" placeholder="请输入"></el-input>
          </el-form-item>
        </el-row>
        <!-- 支付宝 -->
        <el-row v-if="alpay" class="searchDialog-input">
          <el-form-item label="publicKey(公钥)：" prop="publicKey">
            <el-input v-model="statusForm.publicKey" auto-complete="off" placeholder="请输入"></el-input>
          </el-form-item>
          <el-form-item label="privateKey(私钥)：" prop="privateKey">
            <el-input v-model="statusForm.privateKey" auto-complete="off" placeholder="请输入"></el-input>
          </el-form-item>
          <el-form-item label="merchantId(商户号)：" prop="merchantId">
            <el-input v-model="statusForm.merchantId" auto-complete="off" placeholder="请输入"></el-input>
          </el-form-item>
          <el-form-item label="merchantEmail(商户邮箱)：" prop="merchantEmail">
            <el-input v-model="statusForm.merchantEmail" auto-complete="off" placeholder="请输入"></el-input>
          </el-form-item>
        </el-row>
        <!-- 英联 -->
        <el-row v-if="union" class="searchDialog-input">
          <el-form-item label="publicCertificate(公钥证书)：" prop="publicCertificate">
            <el-input v-model="statusForm.publicCertificate" auto-complete="off" placeholder="请输入"></el-input>
          </el-form-item>
          <el-form-item label="privateCertificateKey(私钥证书秘钥)：" prop="privateCertificateKey">
            <el-input v-model="statusForm.privateCertificateKey" auto-complete="off" placeholder="请输入"></el-input>
          </el-form-item>
          <el-form-item label="privateCertificate(私钥证书)：" prop="privateCertificate">
            <el-input v-model="statusForm.privateCertificate" auto-complete="off" placeholder="请输入"></el-input>
          </el-form-item>
          <el-form-item label="merchantId(商户号)：" prop="merchantId">
            <el-input v-model="statusForm.merchantId" auto-complete="off" placeholder="请输入"></el-input>
          </el-form-item>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer" style="text-align:center">
        <el-button @click="checkpage = false">取 消</el-button>
        <el-button type="primary" @click="checkpaged">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import PopupTreeInput from "@/components/PopupTreeInput";
import CyTable from "@/views/Core/JicTable";
import CyTable1 from "@/views/Core/CyTable";
import KtButton from "@/views/Core/KtButton";
import TableColumnFilterDialog from "@/views/Core/TableColumnFilterDialog";
export default {
  components: {
    PopupTreeInput,
    CyTable,
    CyTable1,
    KtButton,
    TableColumnFilterDialog
  },
  data() {
    return {
      channelCode: "",
      wechant: false,
      alpay: false,
      union: false,
      size: "small",
      filters: {
        merchantCode: "",
        payType: "",
        payChannel: "",
        gatewayName: "",
        saleChannelCode: ""
      },
      checked: [],
      payChannelOption: [], //支付方式
      gatewayOption: [],
      wechantOption: [], //支付网关 微信
      alpayOption: [], //支付网关 支付宝
      unionPayOption: [], //支付网关 银联
      iconWechat: "", // 微信
      iconaAlpay: "", // 支付宝
      iconUnion: "", // 银联
      terminalTypeOption: [
        {
          key: "1",
          value: "PC"
        },
        {
          key: "2",
          value: "APP"
        },
        {
          key: "3",
          value: "H5"
        },
        {
          key: "4",
          value: "WX_MINI_PROGRAM"
        }
      ],
      businessTypeOption: [
        {
          key: 1,
          value: "普通支付"
        },
        {
          key: 2,
          value: "充值"
        }
      ],
      saleChannelOption: [], //销售渠道
      radio: "1",
      options: {},
      filtersCyTable1: {
        merchant_code: "",
        merchant_name: ""
      },
      statusForm: {
        privateCertificateKey: "",
        privateCertificate: "",
        merchantId: "",
        mappSecret: "",
        appKey: "",
        appId: ""
      },

      columns: [
        { prop: "methodName", label: "支付方式", minWidth: 100 },
        { prop: "channelName", label: "支付渠道", minWidth: 100 },
        { prop: "gatewayName", label: "网关名称", minWidth: 100 },
        { prop: "saleChannelName", label: "销售渠道", minWidth: 100 },
        { prop: "merchantCode", label: "商家编码", minWidth: 100 },
        { prop: "storeID", label: "店铺ID", minWidth: 100 },
        {
          prop: "terminalType",
          label: "终端类型",
          minWidth: 100,
          formatter: this.terminalFormat
        }
          ,
        {
          prop: "businessType",
          label: "业务类型",
          minWidth: 100,
          formatter: this.typeFormat
        },
        { prop: "iconUrl", label: "图标地址", minWidth: 250 },
        { prop: "payUrl", label: "支付地址", minWidth: 100 },
        { prop: "notifyUrl", label: "回调地址", minWidth: 100 },
        { prop: "returnUrl", label: "跳转地址", minWidth: 100 },
        {
          prop: "status",
          label: "网关状态",
          minWidth: 100,
          formatter: this.statusFormat
        },
        { prop: "creatorName", label: "创建人", minWidth: 100 },
        { prop: "createTime", label: "创建时间", minWidth: 100 },
        { prop: "remark", label: "备注", minWidth: 100 }
      ],
      clickColumns: [
        { prop: "merchantId", label: "商家编码", minWidth: 120 },
        { prop: "merchantName", label: "商家名称", minWidth: 120 },
        { prop: "merchantType", label: "商家类型", minWidth: 120 }
      ],

      filterColumns: [],
      pageRequest: { pageNum: 1, pageSize: 10 },
      pageResult: {},
      gatewayId: "",

      operation: false, // true:新增, false:编辑
      dialogVisible: false,
      detailDialogVisible: false, // 新增编辑界面是否显示
      merchantVisible: false,
      editLoading: false,
      checkpage: false,
      // 新增编辑界面数据
      dataForm: {
        methodName: "",
        channelCode: "",
        gatewayCode: "",
        gatewayName: "",
        saleChannelCode: "",
        storeCode: "",
        merchantCode: "",
        businessType: "",
        terminalType: "",
        status: "1",
        iconUrl: "",
        payUrl: "",
        returnUrl: "",
        notifyUrl: ""
      },
      dataFormRules: {
        channel_code: [
          { required: true, message: "请输入支付渠道", trigger: "change" }
        ],
        gateway_code: [
          { required: true, message: "请输入网关名称", trigger: "change" }
        ],
        sale_channel_code: [
          { required: true, message: "请输入销售渠道", trigger: "change" }
        ],
        businessType: [
          { required: true, message: "请输入业务类型", trigger: "change" }
        ],
        payUrl: [
          { required: true, message: "请输入支付地址", trigger: "blur" }
        ],
        jumpUrl: [
          { required: true, message: "请输入跳转地址", trigger: "blur" }
        ],
        callbackUrl: [
          { required: true, message: "请输入回调地址", trigger: "blur" }
        ]
      },
      statusRuleForm: {
        privateCertificateKey: [
          { required: true, message: "请输入私钥证书Key", trigger: "blur" }
        ],
        privateCertificate: [
          { required: true, message: "请输入私钥证书", trigger: "blur" }
        ],
        merchantId: [
          { required: true, message: "请输入商户号", trigger: "blur" }
        ],
        mappSecret: [
          { required: true, message: "请输入应用secret", trigger: "blur" }
        ],
        appKey: [{ required: true, message: "请输入应用Key", trigger: "blur" }],
        appId: [{ required: true, message: "请输入应用ID", trigger: "blur" }]
      }
    };
  },
  methods: {
    // 获取分页数据
    findPage: function(data) {
      if (data != null && data.start != null) {
        if (data.start != null) {
          this.pageRequest.pageNum = data.start;
        }
        if (data.limit != null) {
          this.pageRequest.pageSize = data.limit;
        }
      }
      let this_ = this;
      if (this_.filters == undefined || this_.filters == null) {
        this_.filters = {};
      }
      this_.filters.start = this.pageRequest.pageNum;
      this_.filters.limit = this.pageRequest.pageSize;
      this.utils.request.queryPaymentGatewayList(this_.filters, function(res) {
        if (res.data == null) {
          res.data = [];
          res.totle = 0;
        } else {
          this_.$refs.CyTable.findPage({
            content: res.data.rows,
            total: res.data.total
          });
        }
      });
    },
    //获取支付渠道,网关名称，图标等
    queryPayChannel() {
      let query = {};
      let params = {};
      let icon = {};
      let this_ = this;
      query.type = "pay_channel";
      params.type = "gate_way_name";
      icon.type = "icon_url";
      this_.utils.request.getSysConfigList(query, function(res) {
        if (res.code == "0000") {
          this_.payChannelOption = res.data;
        }
      });
      this_.utils.request.getSysConfigList(params, function(res) {
        if (res.code == "0000") {
          for (let i = 0; i < res.data.length; i++) {
            if (res.data[i].key == "gate_way1") {
              this_.wechantOption.push(res.data[i]);
            } else if (res.data[i].key == "gate_way2") {
              this_.alpayOption.push(res.data[i]);
            } else if (res.data[i].key == "gate_way3") {
              this_.unionPayOption.push(res.data[i]);
            }
          }
        }
      });
      this_.utils.request.getSysConfigList(icon, function(res) {
        if (res.code == "0000") {
          for (let i = 0; i < res.data.length; i++) {
            if (res.data[i].key == "icon_url_wechat") {
              this_.iconWechat = res.data[i].val;
            } else if (res.data[i].key == "icon_url_alpay") {
              this_.iconaAlpay = res.data[i].val;
            } else if (res.data[i].key == "icon_url_union") {
              this_.iconUnion = res.data[i].val;
            }
          }
        }
      });
    },
    changes() {
      //this.$forceUpdate()
    },
    handleClose() {
      this.dataForm = {
        methodName: "",
        channelCode: "",
        gatewayCode: "",
        gatewayName: "",
        saleChannelCode: "",
        storeCode: "",
        merchantCode: "",
        businessType: "",
        terminalType: "",
        status: "1",
        iconUrl: "",
        payUrl: "",
        returnUrl: "",
        notifyUrl: ""
      };
      this.$refs.dataForm.resetFields();
    },
    handleCloses() {
      this.wechant = false;
      this.alpay = false;
      this.union = false;
      (this.statusForm = {
        privateCertificateKey: "",
        privateCertificate: "",
        merchantId: "",
        mappSecret: "",
        appKey: "",
        appId: "",
        publicKey: "",
        privateKey: "",
        merchantEmail: "",
        publicCertificate: ""
      }),
        this.$refs.statusForm.resetFields();
    },
    //配置网关
    handleCustom(data) {
      this.gatewayId = data.row.id;
      this.channelCode = data.row.channelCode;
      let this_ = this;
      let query = {};
      let falg = false;
      var temp;
      if (data.row.id != null) {
        query.gatewayId = data.row.id;
        this.utils.request.queryPaymentConfigGateway(query, function(res) {
          if (res.code == "0000" && res.data.rows != null) {
            temp = res.data.rows;
            if (data.row.channelCode == 250 && res.data.rows != null) {
              for (let i = 0; i < temp.length; i++) {
                this_.statusForm.gatewayId = temp[i].gatewayId;
                if (temp[i].paramKey == "privateCertificateKey") {
                  this_.statusForm.privateCertificateKey = temp[i].paramValue;
                } else if (temp[i].paramKey == "privateCertificate") {
                  this_.statusForm.privateCertificate = temp[i].paramValue;
                } else if (temp[i].paramKey == "merchantId") {
                  this_.statusForm.merchantId = temp[i].paramValue;
                } else if (temp[i].paramKey == "mappSecret") {
                  this_.statusForm.mappSecret = temp[i].paramValue;
                } else if (temp[i].paramKey == "appKey") {
                  this_.statusForm.appKey = temp[i].paramValue;
                } else if (temp[i].paramKey == "appId") {
                  this_.statusForm.appId = temp[i].paramValue;
                }
              }
              falg = true;
              if (falg) {
                this_.wechant = true;
                this_.checkpage = true;
              }
            } else if (data.row.channelCode == 251 && res.data.rows != null) {
              for (let i = 0; i < temp.length; i++) {
                this_.statusForm.gatewayId = temp[i].gatewayId;
                if (temp[i].paramKey == "publicKey") {
                  this_.statusForm.publicKey = temp[i].paramValue;
                } else if (temp[i].paramKey == "privateKey") {
                  this_.statusForm.privateKey = temp[i].paramValue;
                } else if (temp[i].paramKey == "merchantId") {
                  this_.statusForm.merchantId = temp[i].paramValue;
                } else if (temp[i].paramKey == "mappSecret") {
                  this_.statusForm.mappSecret = temp[i].paramValue;
                } else if (temp[i].paramKey == "merchantEmail") {
                  this_.statusForm.merchantEmail = temp[i].paramValue;
                }
              }
              falg = true;
              if (falg) {
                this_.alpay = true;
                this_.checkpage = true;
              }
            } else if (data.row.channelCode == 252 && res.data.rows != null) {
              for (let i = 0; i < temp.length; i++) {
                this_.statusForm.gatewayId = temp[i].gatewayId;
                if (temp[i].paramKey == "publicCertificate") {
                  this_.statusForm.publicCertificate = temp[i].paramValue;
                } else if (temp[i].paramKey == "privateCertificateKey") {
                  this_.statusForm.privateCertificateKey = temp[i].paramValue;
                } else if (temp[i].paramKey == "privateCertificate") {
                  this_.statusForm.privateCertificate = temp[i].paramValue;
                } else if (temp[i].paramKey == "merchantId") {
                  this_.statusForm.merchantId = temp[i].paramValue;
                }
              }
              falg = true;
              if (falg) {
                this_.union = true;
                this_.checkpage = true;
              }
            }
          } else {
            this_.statusForm = {};
          }
        });
      }
    },
    checkpaged() {
      this.$refs.statusForm.validate(valid => {
        if (valid) {
          var object = {};
          let this_ = this;
          let params = Object.assign({}, this.statusForm);
          if (this_.channelCode == 250) {
            object["privateCertificateKey"] = params.privateCertificateKey;
            object["privateCertificate"] = params.privateCertificate;
            object["merchantId"] = params.merchantId;
            object["mappSecret"] = params.mappSecret;
            object["appKey"] = params.appKey;
            object["appId"] = params.appId;
          } else if (this_.channelCode == 251) {
            object["publicKey"] = params.publicKey;
            object["privateKey"] = params.privateKey;
            object["merchantId"] = params.merchantId;
            object["merchantEmail"] = params.merchantEmail;
          } else if (this_.channelCode == 252) {
            object["publicCertificate"] = params.publicCertificate;
            object["privateCertificateKey"] = params.privateCertificateKey;
            object["privateCertificate"] = params.privateCertificate;
            object["merchantId"] = params.merchantId;
          }

          var json = JSON.stringify(object);
          params.id = this_.gatewayId;
          params.json = json;
          this_.utils.request.editPaymentConfigGateway(params, function(res) {
            if (res.code == "0000") {
              this_.$message({ message: "操作成功", type: "success" });
            } else if (res.code == "9999") {
              this_.$message({ message: "操作失败", type: "error" });
            }
            this_.checkpage = false;
            this_.findPage();
          });
        }
      });
    },
    //复选框
    selectionChange(data) {
      this.checked = data.selections;
    },
    //根据传入终端类型获取对对应key
    getTerminal(data){
      let type =this.terminalTypeOption;
      for (let argument of type) {
        if (argument.value === data){
          this.dataForm.terminalType = argument.key;
        }
      }
    },
    //查询渠道
    queryChannel() {
      let this_ = this;
      let query = {};
      query.status = 1;
      this_.utils.request.queryChannelListOther(query, function(res) {
        if (res.code == "0000") {
          this_.saleChannelOption = res.data;
        }
      });
    },
    changePay(data) {
      let this_ = this;
      let temp = this_.payChannelOption;
      for (let i = 0; i < temp.length; i++) {
        if (temp[i].id == data) {
          this_.dataForm.channelName = temp[i].val;
          this_.dataForm.channelCode = temp[i].id;
        }
      }
      if (data == 250) {
        this.gatewayOption = this.wechantOption;
      } else if (data == 251) {
        this.gatewayOption = this.alpayOption;
      } else if (data == 252) {
        this.gatewayOption = this.unionPayOption;
      } else {
        this.gatewayOption = "";
      }
    },
    changeGateway(data) {
      let this_ = this;
      if (data == 260 || 261 || 262) {
        let temp = this_.wechantOption;
        for (let i = 0; i < temp.length; i++) {
          if (temp[i].id == data) {
            this_.dataForm.gatewayName = temp[i].val;
            this_.dataForm.gatewayCode = temp[i].id;
          }
        }
      } else if (data == 263 || 264 || 265) {
        let temp = this_.alpayOption;
        for (let i = 0; i < temp.length; i++) {
          if (temp[i].id == data) {
            this_.dataForm.gatewayName = temp[i].val;
            this_.dataForm.gatewayCode = temp[i].id;
          }
        }
      } else {
        let temp = this_.unionPayOption;
        for (let i = 0; i < temp.length; i++) {
          if (temp[i].id == data) {
            this_.dataForm.gatewayName = temp[i].val;
            this_.dataForm.gatewayCode = temp[i].id;
          }
        }
      }
      if (data == 260 || 265) {
        this_.dataForm.terminalType = "H5";
        if (data == 260 || 261 || 262) {
          this_.dataForm.iconUrl = this_.iconWechat;
        }
      } else if (data == 261 || 262 || 264) {
        this_.dataForm.terminalType = "APP";
        if (data == 263 || 264 || 265) {
          this_.dataForm.iconUrl = this_.iconaAlpay;
        }
      } else if (data == 263 || 266) {
        this_.dataForm.terminalType = "PC";
        if (data == 266) {
          this_.dataForm.iconUrl = this_.iconUnion;
        }
      }
    },
    changeChannel(data) {
      let this_ = this;
      let temp = this_.saleChannelOption;
      for (let i = 0; i < temp.length; i++) {
        if (temp[i].id == data) {
          this.dataForm.saleChannelName = temp[i].channelName;
          this.dataForm.saleChannelCode = temp[i].id;
        }
      }
    },
    // 编辑
    submitForm: function() {
      this.$refs.dataForm.validate(valid => {
        if (valid) {
          this.$confirm("确认提交吗？", "提示", {}).then(() => {
            let this_ = this;
            this.getTerminal(this.dataForm.terminalType);
            let params = Object.assign({}, this_.dataForm);
            this.utils.request.editPaymentGateway(params, function(res) {
              if (res.code == "0000") {
                this_.$message({ message: "操作成功", type: "success" });

                this_.$refs["dataForm"].resetFields();

                this_.dialogVisible = false;

                this_.findPage(null);
              } else {
                this_.$message({
                  message: "操作失败, " + res.msg,
                  type: "error"
                });
              }
            });
          });
        }
      });
    },
    statusFormat: function(row, column, cellValue, index) {
      if (cellValue == 2) {
        return "禁用";
      } else if (cellValue == 1) {
        return "启用";
      }
    },
    typeFormat: function(row, column, cellValue, index) {
      if (cellValue == 1) {
        return "普通支付";
      } else if (cellValue == 2) {
        return "充值";
      }
    },
    terminalFormat: function(row, column, cellValue, index){
      if (cellValue == 1){
        return "PC";
      }else if (cellValue == 2){
        return "APP";
      }else if (cellValue == 3){
        return "H5";
      }else if (cellValue == 4){
        return "WX_MINI_PROGRAM";
      }
    },
    // 显示新增界面
    handleAdd: function() {
      var this_ = this;
      this_.dialogVisible = true;
      this_.operation = true;
      this_.dataForm.methodName = "网上支付";
    },
    // 显示编辑界面
    handleEdit: function(params) {
      this.dialogVisible = true;
      this.operation = false;
      this.dataForm = Object.assign({}, params.row);
      // this.dataForm.methodName= params.row.methodName
      // this.dataForm.channelCode= parseInt(params.row.channelCode)
      // this.dataForm.saleChannelCode= parseInt(params.row.saleChannelCode)
      this.dataForm.gatewayCode = params.row.gatewayCode;
      this.changePay(params.row.channelCode);
    },
    operationClick() {},
    resetCyTable1() {},
    //重置
    resetForm(formName) {
      if (this.$refs[formName] != undefined) {
        this.$refs[formName].resetFields();
        this.findPage(null);
      }
    },

    // 批量删除
    handleDelete: function(data) {
      if (data != null && data.params != null && data.params.length > 0) {
        let ids = data.params.map(item => item.id).toString();

        let params = {};
        params.ids = ids;
        var this_ = this;
        this.utils.request.deletePaymentGateway(params, function(res) {
          if (res.code == "0000") {
            this_.$message({ message: "操作成功", type: "success" });
            this_.findPage(null);
          } else {
            this_.$message({ message: "操作失败, " + res.msg, type: "error" });
          }
        });
      }
    },
    // 处理表格列过滤显示
    displayFilterColumnsDialog: function() {
      this.$refs.tableColumnFilterDialog.setDialogVisible(true);
    },
    // 处理表格列过滤显示
    handleFilterColumns: function(data) {
      this.filterColumns = data.filterColumns;
      this.$refs.tableColumnFilterDialog.setDialogVisible(false);
    },
    // 处理表格列过滤显示
    initColumns: function() {
      var temp = [];

      $.each(this.columns, function(key, val) {
        temp.push(val);
      });
      this.filterColumns = temp;
    },
    //列表下载
    downloadExcel() {
      this.$confirm("确定下载列表文件?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          let filename = "系统参数下载";
          this.$refs.CyTable.exportData(
            this.filters,
            this.filterColumns,
            filename
          );
        })
        .catch(() => {});
    }
  },
  mounted() {
    this.initColumns();
    this.queryPayChannel();
    this.queryChannel();
  }
};
</script>

<style scoped lang='scss'>
/deep/  .el-form-item--mini.el-form-item,
 .el-form-item--small.el-form-item  {
      margin-bottom: 10px;
}
</style>
